<template>
  <div>
    {{ obj.name }}
    <h1>{{ r1.name }}</h1>
    <h1>{{ r2.name }}</h1>
    <h1>{{ m1.obj2.name }}</h1>
    <button @click="change">修改</button>
  </div>
</template>

<!-- setup作为语法糖使用 会自动return -->
<script lang="ts" setup>
import { reactive, ref } from 'vue';


const obj = {
  name: '张三',
  age: 18,
  like: 'vue'
}
// ref 通过ref定义的复杂数据类型 内部会自动将响应式数据转换成reactive代理对象
const r1 = ref(obj)

const r2 = reactive({
  name: '李四',
})
const change = () => {
  // ref修改或者获取的时候加上 .value
  r1.value.name = '孙悟空'
  console.log(r1)
  // reactive 定义的复杂类型 获取和修改不需要加vue
  r2.name = '王五'
  console.log(r2)

  m1.obj2 = {
    name: '白骨精'
  }
}

/*
  ref和reactive区别

  ref用来处理基本数据类型 reactive处理复杂数据类型
  如果通过ref定义的复杂数据类型 内部会自动将响应式数据转换成reactive代理对象的形式

  ref定义的数据 需要value，reactive不需要
*/

//reactive的bug
let obj2 = {
  name: '唐僧'
}
// 解决reactive再包裹一层对象
let m1 = reactive({
  obj2
})
</script>

<style lang="scss" scoped></style>